import { createApp } from 'vue'
import './style.css'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'
import App from './App.vue'
import DragButton from './components/canvas/DragButton.vue'
import DragText from './components/canvas/DragText.vue'
import DragRect from './components/canvas/DragRect.vue'
import DragEchart from './components/canvas/DragEchart.vue'
import { userToolbarStore } from './store/index'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 全局注册组件
app.component("drag-button", DragButton)
app.component("drag-text", DragText)
app.component("drag-rect", DragRect)
app.component("drag-echart", DragEchart)

// 拖拽自定义指令
app.directive("drag", {
  mounted(el, { value }) {
    // 添加鼠标按下事件
    el.addEventListener('mousedown', function () {
      const currentItem = userToolbarStore().componentsList.find(item => item.id === value)
      // console.log("按下事件", currentItem)
      const moveFn = (event: any) => {
        currentItem.style.left = event.clientX
        currentItem.style.top = event.clientY
      }
      document.addEventListener('mousemove', moveFn)

      document.addEventListener('mouseup', function () {
        document.removeEventListener("mousemove", moveFn)
      })
    })
  }
})

app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')